<div id="app" v-cloak>
    <div class="flex-column flex-content-center">
        <div class="padding20">
            <el-scrollbar height="84vh" width="100%">
                <el-form :model="form" ref="form" :rules="rules" label-width="auto" style="width: 700px;margin-top: 20px">
                    <el-form-item v-for="item in formList" :label="item.title+`:`" :prop="item.name">
                        <el-input v-if="item.type==`string`" v-model="form[item.name]" :placeholder="item.tip"></el-input>
                        <el-input v-if="item.type==`textarea`" type="textarea" :rows="3" v-model="form[item.name]" :placeholder="item.tip"></el-input>
                        <el-select
                                v-if="item.type==`selects`"
                                v-model="form[item.name]"
                                :placeholder="item.tip"
                                multiple
                                size="large"
                                style="width: 240px"
                        >
                            <el-option
                                    v-for="(items,key) in item.content"
                                    :key="key"
                                    :label="items"
                                    :value="key"
                            />
                        </el-select>
                        <el-select
                                v-if="item.type==`select`"
                                v-model="form[item.name]"
                                :placeholder="item.tip"
                                size="large"
                                style="width: 240px"
                        >
                            <el-option
                                    v-for="(items,key) in item.content"
                                    :key="key"
                                    :label="items"
                                    :value="key"
                            />
                        </el-select>
                        <el-checkbox-group v-if="item.type==`checkbox`" v-model="form[item.name]">
                            <el-checkbox v-for="(items,key) in item.content" :label="items" :value="key" />
                        </el-checkbox-group>
                        <el-radio-group v-if="item.type==`radio`" v-model="form[item.name]">
                            <el-radio v-for="(items,key) in item.content" :value="key">{{items}}</el-radio>
                        </el-radio-group>
                        <muimg v-if="item.type==`image`" v-model="form[item.name]"></muimg>
                        <muimgs v-if="item.type==`images`" v-model="form[item.name]"></muimgs>
                        <mufile v-if="item.type==`file`" v-model="form[item.name]"></mufile>
                        <mufiles v-if="item.type==`files`" v-model="form[item.name]"></mufiles>
                        <el-switch
                                v-if="item.type==`switch`"
                                v-model="form[item.name]"
                                class="ml-2"
                                active-value="1"
                                inactive-value="0"
                                :active-text="item&&item.content&&item.content['1']?item.content['1']:`1`"
                                :inactive-text="item&&item.content&&item.content['0']?item.content['0']:`0`"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        ></el-switch>
                        <el-time-picker
                                class="date-picker-class"
                                v-if="item.type==`time`"
                                v-model="form[item.name]"
                                arrow-control
                                :placeholder="item.tip"
                                value-format="HH:mm:ss"
                        >
                        </el-time-picker>
                        <el-time-picker
                                class="date-picker-class"
                                v-if="item.type==`timerange`"
                                v-model="form[item.name]"
                                is-range
                                arrow-control
                                :placeholder="item.tip"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="HH:mm:ss"
                        >
                        </el-time-picker>
                        <el-date-picker
                                class="date-picker-class"
                                v-if="item.type==`date`"
                                v-model="form[item.name]"
                                type="date"
                                :placeholder="item.tip"
                                value-format="YYYY-MM-DD"
                        ></el-date-picker>
                        <el-date-picker
                                class="date-picker-class"
                                v-if="item.type==`daterange`"
                                v-model="form[item.name]"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="YYYY-MM-DD"
                        ></el-date-picker>

                        <el-date-picker
                                class="date-picker-class"
                                v-if="item.type==`datetime`"
                                v-model="form[item.name]"
                                type="datetime"
                                :placeholder="item.tip"
                                value-format="YYYY-MM-DD HH:mm:ss"
                        ></el-date-picker>
                        <el-date-picker
                                class="date-picker-class"
                                v-if="item.type==`datetimerange`"
                                v-model="form[item.name]"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                value-format="YYYY-MM-DD HH:mm:ss"
                        >
                        </el-date-picker>
                        <editor v-if="item.type==`editor`" v-model="form[item.name]"></editor>
                        <div v-if="item.type==`array`" style="width: 100%">
                            <div v-for="(items,keys) in item.content" class="flex-row flex-item-center" style="width: 81%;margin-top: 5px">{{keys}}:<el-input v-model="form[item.name][keys]" :placeholder="items" style="margin-left: 10px"></el-input></div>
                        </div>
                    </el-form-item>
                </el-form>

            </el-scrollbar>
        </div>
        <div class="flex-row top10 flex-content-end">
            <div style="width: 95%">
                <el-button type="primary" @click="onSubmit" color="#626aef">保存</el-button>
                <el-button  @click="handleCancel">取消</el-button>
            </div>
        </div>
    </div>
</div>
